<template>
  <section>
    <div class="filter-container">
      <span style="color:red;font-size:18px;font-weight:bold;margin-right:30px;">{{ pageDetail.title }}</span>
      <common-input type="number" @keyup.enter.native="handleFilter" class="w100" placeholder="商品编号"
        v-model="listQuery.productNo" />
      <common-input @keyup.enter.native="handleFilter" class="w100 ml10" placeholder="商品名称"
        v-model="listQuery.keyword" />

      <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button size="mini" class="ml10" @click="handleCreate" type="primary" icon="el-icon-plus">选择商品</el-button>
    </div>
    <el-alert v-if="ids && ids.length > 0" show-icon>
      <template slot="title">
        <span>已选择 {{ ids.length }} 项</span> <el-button @click="clear()" type="text">清空</el-button> <el-button
          @click="remove()" type="text">移除出专场</el-button>
      </template>
    </el-alert>
    <el-table ref="dataTable" :height="tableHeight" :data="list" @selection-change="selectChange" style="width: 100%">
      <el-table-column fixed type="selection" width="55">
      </el-table-column>
      <el-table-column align="right" label="展示排序">
        <template slot-scope="scope">
          <span>{{ scope.row.orderNum }}</span>
          <i @click="editOrder(scope.row)" class="el-icon-edit ml10" style="cursor:pointer;color:#F4222D;"></i>
        </template>
      </el-table-column>
      <el-table-column align="left" label="商品编号">
        <template slot-scope="scope">
          <span>{{ scope.row.ycProductId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="" width="120">
        <template slot-scope="scope">
          <span><img :src="scope.row.listImgUrl" style="width:80px;cursor:pointer;"
              @click="viewPic(scope.row)" /></span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="商品">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="分类">
        <template slot-scope="scope">
          <span v-if="scope.row.parentCateId > 0">{{ scope.row.parentCateName }}<span v-if="scope.row.cateId > 0">-{{
            scope.row.cateName }}</span></span>
        </template>
      </el-table-column>
      <el-table-column align="right" label="供货成本">
        <template slot-scope="scope">
          <span>￥{{ scope.row.minSupplyPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" label="运费成本">
        <template slot-scope="scope">
          <span>￥{{ scope.row.freightPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" label="售价">
        <template slot-scope="scope">
          <span>￥{{ scope.row.minSalePrice }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" label="库存">
        <template slot-scope="scope">
          <span>{{ scope.row.inventory }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNum" :page-sizes="[20, 30, 50]" :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>

    <el-dialog title="编辑排序" :visible.sync="dialogOrderVisible" :close-on-click-modal="false" width="300px">
      <el-form :model="orderForm" ref="orderForm" label-width="80px">
        <el-form-item label="排序" prop="orderNum">
          <el-input size="mini" type="number" placeholder="" maxlength="3" v-model="orderForm.orderNum" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogOrderVisible = false">取消</el-button>
        <el-button :loading="orderLoading" size="mini" type="primary" @click="okOrder">确定</el-button>
      </div>
    </el-dialog>



    <el-dialog title="选择商品" :visible.sync="dialogProductVisible" :close-on-click-modal="false" width="1000px">
      <product-list :formData.sync="productForm" @okSelect="okSelectProduct" />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="dialogProductVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {
  product_page_relate_list,
  product_add_to_page,
  product_page_detail,
  product_remove_from_page,
  product_update_page_order
} from '../../api/product';
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
  components: {
    'product-list': () => import('../../components/Product/list'),
  },
  data() {
    return {
      dialogProductVisible: false,
      productForm: {
        is_select: true,
        isVerification: 1
      },
      viewerId: null,
      orderLoading: false,
      tableHeight: 200,
      cateList: [],
      parentCateList: [],
      list: null,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        agency: undefined,
        keyword: undefined,
        auditStatus: '3',
        orderCol: "",
        orderAsc: "",
        cateId: undefined,
        parentCateId: undefined,
        status: '0',
        getSaleCount: 1,
        productNo: undefined,
      },
      total: null,
      activeName: '1',
      currentId: 0,
      checkLoading: false,
      dialogOrderVisible: false,
      orderForm: {
        pageId: 0,
        productId: 0,
        orderNum: 0,
      },
      dialogStockVisible: false,
      stockLoading: false,
      ids: [],
      pageId: 0,
      pageDetail: {}
    }
  },
  mounted() {
    const that = this

    window.onresize = () => {

      return (() => {

        that._getTableHeight()

      })()
    }
  },
  created() {
    this.pageId = parseInt(this.$route.query.id);
    console.log(this.pageId)
    if (this.pageId == 64) {
      this.productForm.isVerification = 2
    }
    this._getTableHeight();
    this.getList();
    this.getDetail();
  },
  methods: {
    getDetail() {
      product_page_detail(this.pageId).then((res) => {
        this.pageDetail = res.data;
      }).catch((err) => {

      })
    },
    okSelectProduct(ids) {
      product_add_to_page(
        {
          pageId: this.pageId,
          ids: ids
        }
      ).then((res) => {
        this.$message.success("商品已加入专区");
        this.getList();
        this.dialogProductVisible = false;
      }).catch((err) => {

      })
      // console.log(ids)
    },
    handleCreate() {
      this.dialogProductVisible = true;
    },
    _getTableHeight() {
      this.tableHeight = window.innerHeight - 250
    },
    getList() {
      this.listLoading = true;
      product_page_relate_list(this.pageId, this.listQuery).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.listLoading = false;
      })
    },
    viewPic(row) {
      if (row.imgUrls) {
        let all_pic = row.imgUrls.split(",");
        $("#pic_viewer").html("");
        if (all_pic && all_pic.length > 0) {
          all_pic.forEach((item, idx) => {
            var str = '<li style="width:100%;">';
            str += '<img rel-src="' + item + '" src="' + item + '">';
            str += '</li>';
            $("#pic_viewer").append(str);
          })
        }
        this.viewerId && this.viewerId.destroy()
        this.viewerId = new Viewer(document.getElementById('pic_viewer'));
        $('#pic_viewer').find("img").eq(0).trigger("click")
      }
    },
    handleFilter() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    dialogClose() {
      this.$refs.form.resetFields();
    },
    tblSort(d) {
      this.listQuery.orderCol = d.prop;
      this.listQuery.orderAsc = d.order;

      this.handleFilter();
    },
    editOrder(row) {
      this.orderForm.pageId = this.pageId;
      this.orderForm.productId = row.id;
      this.orderForm.orderNum = row.orderNum;

      // console.log(this.orderForm)
      this.dialogOrderVisible = true;
    },
    okOrder() {
      this.orderLoading = true;
      product_update_page_order(this.orderForm).then((res) => {
        this.orderLoading = false;
        this.dialogOrderVisible = false;
        this.$message.success("排序已更新");

        this.getList();
      }).catch((err) => {
        this.orderLoading = false;
      })
    },
    selectChange(selection) {
      this.ids = [];
      if (selection && selection.length > 0) {
        selection.forEach((item) => {
          this.ids.push(item.id)
        })
      }
      // console.log(this.ids)
    },
    clear() {
      this.$refs.dataTable.clearSelection();
    },
    remove() {
      this.$confirm('确定移除出专场?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          product_remove_from_page({
            ids: this.ids,
            pageId: this.pageId
          })
            .then(() => {
              this.$message.success("已移除出专场");
              this.getList();
            });
        }).catch(() => { });

    }
  }
};
</script>
<style lang="scss" scoped></style>
